<template>
    <view>
		<view>
			<table-title content="委托书文档上传详情"></table-title>
			<view class="in-center">
			    <small-title content="基本资料"></small-title>
			    <view class="state-bar">
			        <view class="state-msg">{{state}}</view>
			    </view>
			</view>
			<view class="item-table">
			    <view-item name="申请人" :value="userName"></view-item>
			    <view-item name="手机号码" :value="userPhone"></view-item>
			    <view-item name="租户名称" :value="company"></view-item>
			    <view-item name="楼盘" :isLast="true" :value="building"></view-item>
			</view>
			<view>
			    <small-title content="委托人信息"></small-title>
			    <view class="item-table">
			        <view-item name="姓名" :value="proxyMsg.name"></view-item>
			        <view-item name="身份证" :isLast="true" :value="proxyMsg.idCard"></view-item>
			    </view>
			    <view style="display: flex;margin-top: 10rpx;">
			        <view class="picture-block">
			            <image :src="imageUrl[0]" @click="previewPicture(0)" class="picture-style"></image>
			            <view class="picture-note">身份证正面</view>
			        </view>
			        <view class="picture-block">
			            <image :src="imageUrl[1]" @click="previewPicture(1)" class="picture-style"></image>
			            <view class="picture-note">身份证反面</view>
			        </view>
			        <view class="picture-block">
			            <image :src="imageUrl[2]" @click="previewPicture(2)" class="picture-style"></image>
			            <view class="picture-note">委托书</view>
			        </view>
			    </view>
			</view>
			<view>
			    <small-title content="平台反馈"></small-title>
			    <view v-for="(item,index) in commentList" :key="'comment'+index">
			        <comment :imageUrl="item.image" :userId="item.userId" 
			            :commentMsg="item.content" :commentTime="item.time"></comment>
			    </view>
			</view>
			<view>
			    <small-title content="处理进度"></small-title>
			    <proccess-bar :proccessList="proccessList"></proccess-bar>
			</view>
			<button class="confirm-button" @click="confirm">确认</button>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
    </view>
</template>

<script>
    export default{
        data() {
            return {
                state: '待受理',
                userName: '李阳',
                userPhone: '18705015193',
                company: '福建海峡科技有限公司',
                building: '福建八闽大厦',
				proxyMsg: {'name':'李阳','idCard':'350121200000000000'},
                imageUrl: ['../../../static/no-image.svg','../../../static/no-image.svg','../../../static/no-image.svg'],
                commentList:[
                    {'image':'../../../static/user-logo.svg','userId':'XIAO','content':'存在问题','time':'上午 10:16'},
                    {'image':'../../../static/user-logo.svg','userId':'MING','content':'存在问题','time':'上午 10:16'}
                ],
                proccessList:[
                    {'type':'firstCanvas','commentMsg':'提交收楼文档','time':'2021-01-01 01:01:11'},
                    {'type':'lastCanvas','commentMsg':'驳回','time':'2020-03-03 03:33:33'}
                ],
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
            }
        },
        methods: {
            addPicture(e) {
                uni.chooseImage({
                    success: (res) => {
                        let tmp = [...this.hasPicture]
                        let imgTmp = [...this.imageUrl]
                        imgTmp[e] = res.tempFilePaths[0]
                        tmp[e] = !tmp[e]
                        this.hasPicture = tmp
                        this.imageUrl = imgTmp
                    }
                })
			},
			previewPicture(e){
				console.log(this.imageUrl.slice(e,e+1))
				uni.previewImage({
					urls:this.imageUrl.slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			confirm(){
				uni.redirectTo({
					url:'../table/table'
				})
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			}
		},
	}
</script>
<style>
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.picture-part{
		display: flex;
		margin: 0 0 50rpx 0;
		font-size: 100rpx;
		font-weight: 200;
		align-items: center;
		justify-content: center;	
		width: 170rpx;
		height: 170rpx;
		border: dashed 1rpx #000000;
	}
	.picture-style{
		width: 170rpx;
		height: 170rpx;
		margin: 0 0 10rpx 0rpx;
	}
	.picture-note{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.picture-block{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 60rpx;
	}
	.confirm-button{
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
	}
	.wrong-logo{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -40rpx;
		margin-left: 130rpx;
		z-index: 999;
		background-color: #555555
	}
	.state-bar{
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 160rpx;
		justify-content: flex-end;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>